<template lang="">
  <div>
    <el-row :gutter="20" v-loading="loading">
      <el-col :span="12">
        <el-descriptions title="单位基本信息">
          <el-descriptions-item label="单位名称"
            >{{ form.name }}
          </el-descriptions-item>
          <el-descriptions-item label="联系人">
            <el-tag
              v-if="this.form.contact == null || this.form.contact == ''"
              size="small"
              >暂无联系人</el-tag
            >
            <span v-else type="primary"> {{ form.contact }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="联系方式">
            <el-tag
              v-if="this.form.telephone == null || this.form.telephone == ''"
              size="small"
              >暂无联系方式</el-tag
            >
            <span v-else type="primary"> {{ form.telephone }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="邮箱">
            <el-tag
              v-if="this.form.email == null || this.form.email == ''"
              size="small"
              >暂无邮箱</el-tag
            >
            <span v-else type="primary"> {{ form.email }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="联系地址">
            <el-tag
              v-if="this.form.addr == null || this.form.addr == ''"
              size="small"
              >暂无邮箱</el-tag
            >
            <span v-else type="primary"> {{ form.addr }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="网址">
            <el-tag
              v-if="this.form.url == null || this.form.url == ''"
              size="small"
              >暂无</el-tag
            >
            <el-link v-else type="primary" :href="form.url" target="_blank">{{
              form.url
            }}</el-link>
          </el-descriptions-item>
          <el-descriptions-item label="单位规模">
            <el-tag
              v-if="this.form.size == null || this.form.size == ''"
              size="small"
              >空</el-tag
            >
            <span v-else type="primary"> {{ form.size }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="单位类型">
            <el-tag
              v-if="this.form.type == null || this.form.type == ''"
              size="small"
              >空</el-tag
            >
            <span v-else type="primary"> {{ form.type }}</span>
          </el-descriptions-item>

          <el-descriptions-item label="单位描述">
            <el-tag
              v-if="
                this.form.description == null || this.form.description == ''
              "
              size="small"
              >空</el-tag
            >
            <span v-else type="primary"> {{ form.description }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <el-button
          type="success"
          plain
          size="small"
          icon="el-icon-edit"
          @click="showEdit"
          >修改基本信息</el-button
        >
      </el-col>
      <el-col :span="9">
        <div class="imgBlock">
          <el-image
            v-if="form.logo != null && form.logo != ''"
            :src="form.logo"
            fit="fill"
          >
          </el-image>
          <img v-else src="../../assets/images/emptyImg.png" title="暂无logo" />
        </div>
      </el-col>
    </el-row>
    <Edit v-if="edit.visible" :param="edit" @doUpdate="doUpdate" />
  </div>
</template>
<script>
import Edit from "./Edit.vue";
export default {
  name: "CompanyInfo",
  components: { Edit },
  data() {
    return {
      form: {},
      // 修改相关
      edit: {
        visible: false,
        close: this.close,
        callback: this.getInfo,
        editForm: null, //传递form表单数据
      },
      loading: true, //图片加载
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    // 查询公司详情信息
    getInfo() {
      this.getRequest("/company/info").then((res) => {
        if (res) {
          this.form = res.obj;

          setTimeout(() => {
            for (let key in this.form) {
              if (this.form[key] == null || this.form[key] == "") {
                this.$set(this.form, key, "");
                this.$notify({
                  title: "提示",
                  message: "请及时完善基本信息",
                  type: "warning",
                });
              }
            }
            this.loading = false;
            console.log(this.form, "详情信息11111");
          }, 500);
        }
      });
    },

    doUpdate(flag) {
      console.log(flag, "子组件传递的，检验表单 ");
      if (flag) {
        let param = this.form;
        if (this.form.single) {
          param.single = "Y";
        } else {
          param.single = "N";
        }
        console.log(this.edit.editForm, "表单表单");
        this.putRequest("/company/", this.edit.editForm).then((res) => {
          if (res.code == 200) {
            console.log(res, "成功成功");
            this.$message.success(res.message);
            this.edit.visible = false;
            this.getInfo();
          }
        });
      }
    },
    //展示修改表单
    showEdit() {
      this.edit.visible = true;
      this.edit.editForm = JSON.parse(JSON.stringify(this.form));
    },
    // 关闭弹出框
    close() {
      this.edit.visible = false;
    },
  },
};
</script>
<style>
.imgBlock {
  width: 250px;
  height: 250px;
  margin: 50px;
}
.imgBlock .el-image {
  width: 250px;
  /* height: 250px; */
}
.imgBlock img {
  width: 250px;
  height: 250px;
}
.el-descriptions__header {
  text-align: center;
  margin: 50px;
  position: relative;
}
.el-descriptions__title {
  font-size: 20px;
  position: absolute;
  left: 40%;
}
.el-descriptions-item__label:not(.is-bordered-label) {
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  padding: 0 3px;
  color: #023344;
}
.el-descriptions-item__content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}
</style>
